<template>
  <view class="my-props-wrap">
    <view class="props-tips props-item">
      <view class="title"> 提示卡 </view>
      <view class="num">x{{ details.show_count }}</view>
      <img class="icon" src="./img/props1707.png" alt="" />
    </view>
    <view class="props-show props-item">
      <view class="title"> 显示卡 </view>
      <view class="num">x{{ details.hint_count }}</view>
      <img class="icon" src="./img/props1708.png" alt="" />
    </view>
    <view class="task">
      <view class="title"> 获取更多道具卡 </view>
      <view class="task-item">
        <view class="info">
          <view class="name">邀请好友</view>
          <view class="desc">分享好友可获得道具卡，抽盒更容易</view>
        </view>
        <button
          class="btn"
          hover-class="hover-bubble"
          open-type="share"
          :class="details.share_status ? 'disabled' : ''"
        >
          {{ details.share_status ? '已分享' : '分享' }}
        </button>
      </view>
      <view class="task-item">
        <view class="info">
          <view class="name">签到</view>
          <view class="desc">签到获得道具卡，试用道具获取抽盒信息</view>
        </view>
        <view
          class="btn"
          hover-class="hover-bubble"
          @tap="onClickOperate($event, 'sign', {})"
          :class="details.sign_status ? 'disabled' : ''"
          >{{ details.sign_status ? '已签到' : '去签到' }}</view
        >
      </view>
      <view class="task-item">
        <view class="info">
          <view class="name">兑换</view>
          <view class="desc">直播间定期发放兑换码，输入兑换码可获取道具卡</view>
        </view>
        <view
          class="btn"
          hover-class="hover-bubble"
          @tap="onClickOperate($event, 'exchange', {})"
          >去兑换</view
        >
      </view>
    </view>
    <shopro-auth-modal></shopro-auth-modal>
  </view>
</template>
<script>
const type = {
  show: '显示卡',
  hint: '提示卡',
};
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(50);
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  data() {
    return {
      details: {
        show_count: 0,
        hint_count: 0,
        share_status: 0,
        sign_status: 0,
      },
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  onLoad() {},
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {
    this.getData();
  },
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    /**
     *  页面点击事件 防抖
     * @param {Object} ev  $event
     * @param {String} name 执行名称
     * @param {Object} data 传值
     */
    onClickOperate(ev, name, data = {}) {
      _delay(() => {
        switch (name) {
          // 签到
          case 'sign':
            this.onSign();
            break;
          //兑换
          case 'exchange':
            this.onExchange();
            break;
        }
      });
    },

    getData() {
      this.$http('v1.getUsersProp', {}, '请稍等').then((res) => {
        if (res.code === 1) {
          this.details = res.data;
        }
      });
    },

    // 签到
    onSign() {
      if (this.details.sign_status) return;
      this.$http('v1.getUsersSignIn', {}).then((res) => {
        if (res.code === 1) {
          if (res.data.res === 1) {
            uni.showModal({
              title: '每日任务-签到',
              content: `签到成功,您成功获取${type[res.data.type]}x${
                res.data.num
              }`,
              showCancel: false,
              confirmText: '确定',
              success: (modal) => {
                if (modal.confirm) {
                  this.getData();
                }
              },
            });
          }
        }
      });
    },
    //兑换
    onExchange() {
      uni.showModal({
        title: '兑换',
        placeholderText: '输入兑换码',
        editable: true,
        success: (res) => {
          if (res.confirm && res.content) {
            this.$http('v1.getUsersCdkey', {
              cdkey: res.content,
            }).then((res) => {
              if (res.code === 1) {
                switch (res.data.res) {
                  case 0:
                    uni.showToast({
                      title: '兑换失败',
                      icon: 'none',
                      duration: 1500,
                      mask: true,
                    });
                    break;
                  case 1:
                    uni.showModal({
                      title: '兑换提示',
                      content: `恭喜您,成功兑换${type[res.data.type]}x${
                        res.data.num
                      }`,
                      showCancel: false,
                      confirmText: '确定',
                      success: (modal) => {
                        if (modal.confirm) {
                          this.getData();
                        }
                      },
                    });
                    break;
                }
              }
            });
          } else if (res.cancel) {
            uni.showToast({
              title: '取消兑换',
              icon: 'none',
              duration: 1500,
              mask: true,
            });
          } else {
            uni.showToast({
              title: '兑换码为空',
              icon: 'none',
              duration: 1500,
              mask: true,
            });
          }
        },
      });
    },
  },
  /** ---------- */
  // 监听窗口尺寸变化 App、微信小程序、快手小程序
  //onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  //onPullDownRefresh() {},
  // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  //onReachBottom() {},
  //点击 tab 时触发，参数为Object 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
  //onTabItemTap() {},
  //用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
  //onShareAppMessage() {},
  //监听页面滚动 nvue暂不支持
  //onPageScroll() {},
  //监听原生标题栏按钮点击事件 App、H5
  //onNavigationBarButtonTap() {},
  /** 监听页面返回
   * 返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键
   * navigateBack表示来源是 uni.navigateBack ；
   * 支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
   * app、H5、支付宝小程序
   */
  //onBackPress() {},
  // 监听原生标题栏搜索输入框输入内容变化事件 App、H5
  //onNavigationBarSearchInputChanged() {},
  // 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H5
  //onNavigationBarSearchInputConfirmed() {},
  // 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H5
  //onNavigationBarSearchInputClicked() {},
  // 监听用户点击右上角转发到朋友圈 微信小程序
  //onShareTimeline() {},
  // 监听用户点击右上角收藏 微信小程序、QQ小程序
  //onAddToFavorites() {},
};
</script>
<style lang="scss" scoped>
.my-props-wrap {
  position: relative;
  padding: 30rpx 30rpx 0;
  width: 100%;
  min-height: 100vh;

  .task {
    padding: 26rpx 30rpx;
    width: 100%;
    min-height: calc(100vh - 30rpx - (195rpx * 2));
    border-radius: 20rpx 20rpx 0 0;
    background-color: #fff;
    animation: slide-in-bottom 1s linear 0s 1 normal none;
    .title {
      font-size: 32rpx;
      font-weight: 800;
      color: #000000;
    }
    .task-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      min-height: 137rpx;
      border-bottom: 2rpx dashed #707070;
      .info {
        .name {
          margin-bottom: 8rpx;
          font-weight: 600;
          font-size: 28rpx;
          color: rgba(161, 132, 239, 1);
        }
        .desc {
          font-size: 22rpx;
          font-weight: 800;
          color: #bbbbc3;
        }
      }
      .btn {
        margin: 0;
        padding: 0rpx 32rpx;
        font-size: 22rpx;
        font-weight: bold;
        color: #ffffff;
        text-align: center;
        line-height: 50rpx;
        border-radius: 25rpx;
        min-width: 108rpx;
        height: 50rpx;
        background-color: rgba(161, 132, 239, 1);

        &.disabled {
          opacity: 0.8;
          filter: grayscale(100);
        }
      }
    }
  }
  .props-item {
    position: relative;
    margin-bottom: 20rpx;
    padding: 20rpx 37rpx;
    width: 100%;
    height: 175rpx;
    border-radius: 20rpx;
    overflow: hidden;
    animation: fade 1s linear 0s 1 normal none;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(
          0deg,
          rgba(255, 255, 255, 0.2) 0px,
          rgba(255, 255, 255, 0.2) 2rpx,
          transparent 2rpx,
          transparent 200rpx
        ),
        linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.2) 0px,
          rgba(255, 255, 255, 0.2) 2rpx,
          transparent 2rpx,
          transparent 100rpx
        );
      background-size: 26rpx 26rpx;
    }

    &.props-tips {
      background-image: linear-gradient(176deg, #fdbdff 0%, #a88fff 100%);
    }
    &.props-show {
      background-image: linear-gradient(90deg, #f8644a 0%, #ffc436 100%);
    }

    .icon {
      position: absolute;
      top: calc(50% - 65rpx);
      right: 37rpx;
      width: 180rpx;
      height: 130rpx;
      animation: rubberband-horizontal 1s linear 0s 1 normal none;
    }
    .num,
    .title {
      font-size: 36rpx;
      font-weight: 800;
      color: #ffffff;
    }
    .num {
      position: absolute;
      left: 37rpx;
      bottom: 24rpx;
    }
  }
}
@keyframes rubberband-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
</style>
